<template>
  <div>
    <el-card>
      <CategorySelector @getid="getid" :ischeck="ischeck"></CategorySelector>
    </el-card>

    <el-card style="margin: 20px 0">
      <div v-show="isShow">
        <!-- 添加按钮 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addAttrValue"
          :disabled="isDisabled"
          >添加属性</el-button
        >
        <!-- 属性列表 -->
        <el-table style="width: 100% ;margin: 10px 0" border :data="attrInfoList">
          <el-table-column
            prop="prop"
            label="序号"
            width="80"
            type="index"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="150">
          </el-table-column>
          <el-table-column
            prop="attrValueList"
            label="属性值列表"
            width="width"
          >
            <template slot-scope="{ row, $index }">
              <el-tag
                v-for="(item, index) in row.attrValueList"
                :key="item.id"
                style="margin: 3px"
                >{{ item.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit-outline"
                @click="handleEdit(scope.$index, scope.row)"
                title="编辑"
              ></el-button>

              <!--  @click="handleDelete(scope.$index, scope.row)" -->
              <el-popconfirm
                style="margin-left: 10px"
                :title="`确定删除 ${scope.row.attrName} 吗？`"
                @onConfirm="handleDelete(scope.$index, scope.row)"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  title="删除"
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="!isShow">
        <!-- 属性添加修改列表 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="属性名">
            <el-input
              placeholder="请输入属性名"
              v-model="attrdata.attrName"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-form ref="form">
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" @click="addattr"  :disabled="!attrdata.attrName"
              >添加属性值</el-button
            >
          </el-form-item>
        </el-form>
        <el-table style="width: 100%" border :data="attrdata.attrValueList">
          <el-table-column
            prop="prop"
            label="序号"
            width="80"
            align="center"
            type="index"
          >
          </el-table-column>
          <el-table-column label="属性值名称" width="width">
            <template slot-scope="{ row, $index }">
              <!--编辑模式  -->
              <el-input
                :ref="$index"
                @blur="CutIsEdit(row, false)"
                @keyup.enter.native="CutIsEdit(row, false)"
                size="small"
                v-if="row.isEdit"
                placeholder="请输入属性值名称"
                v-model="row.valueName"
              ></el-input>
              <!-- 只读模式 -->
              <span
                style="width: 100%; display: block"
                v-else
                @click="CutIsEdit(row, true, $index)"
                >{{ row.valueName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <el-popconfirm
                :title="`确定要删除${row.valueName}吗？`"
                @onConfirm="remove($index)"
              >
                <el-button slot="reference" type="danger" size="mini" round
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-form ref="form" style="margin: 20px 0">
          <el-form-item>
            <el-button type="primary" @click="save"  :disabled="!attrdata.attrValueList.length">保存</el-button>
            <el-button @click="deselect">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "Attr",
  data() {
    return {
      /* 新增或者修改的属性数据 */
      attrdata: {
        attrName: "",
        attrValueList: [],
        categoryId: "",
        categoryLevel: 3,
        id: null,
      },
      idlist: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
      },
      attrInfoList: [],
      isShow: true,
      isDisabled: true,
      ischeck: false,
    };
  },
  methods: {
    /* 获取子组件传回的id */
    /* 获取属列表 */
    async getid(id) {
      if (!id) {
        this.attrInfoList = [];
        this.isDisabled = true;
        return;
      }
      /* console.log(121212121) */
      this.attrdata.categoryId = id.category3Id;
      this.idlist = id;
      this.attrInfoList = [];
      try {
        const re = await this.$api.attr.attrInfoList(
          this.idlist.category1Id,
          this.idlist.category2Id,
          this.idlist.category3Id
        );
        if (re.code === 20000 || re.code === 200) {
          /* console.log( re.data) */
          this.attrInfoList = re.data;
          this.isDisabled = false;
        } else {
          this.$message.error("获取属性列表失败");
        }
      } catch (error) {
        this.$message.error("请求获取属性列表失败");
      }
    },
    /* 点击添加属性 */
    addAttrValue() {
      this.isShow = false;
      this.ischeck = true;
    },
    /* 点击取消 */
    deselect() {
      this.isShow = true;
      this.ischeck = false;
      this.attrdata.attrName = "";
      this.attrdata.attrValueList = [];
      this.attrdata.id = null;
    },
    /* 点击切换编辑模式 */
    /* 失去焦点切换只读模式 */
    CutIsEdit(row, type, index) {
      if (index >= 0) {
        /* 切换编辑模式，获取焦点 */
        row.isEdit = type;
        this.$nextTick(() => {
          // this.$refs[index]    this.$refs.xxx
          /* console.log(this.$refs[index]); */
          this.$refs[index].focus();
        });
      } else {
        /* 失去焦点前判断数据是否为空 */
        /* console.log(row) */
        if (!row.valueName.trim()) {
          row.valueName = "";
          return;
        }
        /* 失去焦点后判断是否有重复的属性名 */
        let isRepetition = this.attrdata.attrValueList.some((item) => {
          if (item !== row) {
            return item.valueName === row.valueName;
          }
        });
        /* 如果有重复的 提示并清空 */
        if (isRepetition) {
          this.$message.warning("属性名已存在请重新输入");
          row.valueName = "";
          this.$nextTick(() => {
            this.$refs[this.attrdata.attrValueList.length - 1].focus();
          });
          return;
        }
        /* 失去焦点切换只读模式 */
        row.isEdit = type;
      }
    },

    /* 删除属性值 */
    remove(index) {
      /* console.log(index); */
      this.attrdata.attrValueList.splice(index, 1);
      /* console.log(this.attrdata.attrValueList) */
    },
    /* 点击添加属性值 */
    addattr() {
      this.attrdata.attrValueList.push({
        attrid: this.attrdata.id,
        valueName: "",
        isEdit: true,
      });
      this.$nextTick(() => {
        // this.$refs[index]    this.$refs.xxx
        /* console.log(this.$refs[index]); */
        this.$refs[this.attrdata.attrValueList.length - 1].focus();
      });
    },
    /* 保存添加 或修改数据 */
    async save() {
      try {
        /* console.log(this.attrdata.attrValueList) */
        /* 去除自定义添加的isEdit属性 */
        /* 去除空值属性 */
        /* console.log(this.attrdata.attrValueList) */
        this.attrdata.attrValueList = this.attrdata.attrValueList.filter(
          (item) => {
            if (item.valueName !== "") {
              delete item.isEdit;
              return true;
            }
          }
        );
        /* console.log(this.attrdata.attrValueList) */
        /* 属性值列表为空不发送 */
        if (!this.attrdata.attrValueList.length) {
          /* console.log("空") */
          this.$message.warning("属性值列表不能为空")
          return;
        }
        const re = await this.$api.attr.saveAttrInfo(this.attrdata);
        console.log(this.attrdata);
        if (re.code === 20000 || re.code === 200) {
          this.$message.success("添加或修改成功");
          this.isShow = true;
          this.attrdata.attrName = "";
          this.attrdata.attrValueList = [];
          this.attrdata.categoryId = "";
          this.ischeck = !this.ischeck;
          this.getid(this.idlist);
        } else {
          this.$message.error("添加或修改失败");
        }
      } catch (error) {
        this.$message.error("请求添加或修改失败");
      }
    },
    /* 编辑 */
    handleEdit(index, row) {
      this.isShow = false;
      this.ischeck = true;
      this.attrdata.attrName = row.attrName;
      /* console.log(row.attrValueList); */
      /* 处理数据  获取的数据 自定义添加编辑模式标记属性isEdit */
      row.attrValueList.forEach((item) => {
        this.$set(item, "isEdit", false);
      });
      /* 深拷贝 */
      this.attrdata.attrValueList = cloneDeep(row.attrValueList);
      this.attrdata.id = row.id;
      /* console.log(index, row); */
      /* console.log(this.attrdata.attrValueList)
      console.log(this.attrdata.attrName) */
    },
    /* 删除 */
    async handleDelete(index, row) {
      console.log(index, row);
      try {
        const re = await this.$api.attr.deleteAttr(row.id);
        if (re.code === 20000 || re.code === 200) {
          this.$message.success("删除成功");
          this.getid(this.idlist);
        } else {
          this.$message.error("删除失败");
        }
      } catch (error) {
        this.$message.error("请求删除失败");
      }
    },
  },
};
</script>

<style>
</style>